Flutter 之TabBar实现 |
您所在的位置：网站首页 › flutter 底部tabbar › Flutter 之TabBar实现 |
Flutter 之TabBar实现
|
Flutter最基础的组件类是Widget，其它所有组件都继承Widget的，紧接着下面有两大类组件： 有状态组件 及 无状态组件 。有状态组件是界面会发生变化的组件，无状态组件即界面不会发生变化的组件； 
Widget
无状态组件：StatelessWidget
无状态组件（StatelessWidget）是不可变的，这意味着它们的属性是不可以改变的，所有的值都是最终的； 有状态组件：StatefulWidget有状态组件(StatefulWidget)持有的状态可能在Widget生命周期中发生变化。 实现一个StatefulWidget至少需要两个类： 一个StatefulWidget类。 一个是State类。StatefulWidget类本身是不变的，但是State类在Widget生命周期中始终存在。要想让界面发生变化，就要使用state对象，state要继承与StatefulWidget。StatefulWidget是描述外观的，而state管理最终显示的外观，数据的变化，当数据发生变化之后通过setState 重新渲染界面 因为TabBar的状态是会变的，所以实现TabBar的时候选用StatefulWidget，如下代码仿微信的布局方式写的： import 'package:flutter/material.dart'; import 'package:wechat_demo/pages/chat_page.dart'; import 'package:wechat_demo/pages/discover_page.dart'; import 'package:wechat_demo/pages/friends_page.dart'; import 'package:wechat_demo/pages/mine_page.dart'; class RootPage extends StatefulWidget { @override _RootPageState createState() => _RootPageState(); } class _RootPageState extends State { //界面数组 List pages = [ ChatPage(), FriendsPage(), DiscoverPage(), MinePage() ]; int _currentIndex = 2; @override Widget build(BuildContext context) { return Container( child: Scaffold( bottomNavigationBar: BottomNavigationBar( onTap: (int index){ _currentIndex = index; setState(() {}); }, selectedFontSize: 12.0, //设置选中的字体大小 type: BottomNavigationBarType.fixed, fixedColor: Colors.green, currentIndex: _currentIndex, items: [ BottomNavigationBarItem( icon: Image(height: 20,width: 20, image: AssetImage('images/tabbar_chat.png')), //未选中时的图标 activeIcon: Image(height: 20,width: 20, image: AssetImage('images/tabbar_chat_hl.png')), //选中时的图标 title: Text('微信') ), BottomNavigationBarItem( icon: Image(height: 20,width: 20, image: AssetImage('images/tabbar_friends.png')), activeIcon: Image(height: 20,width: 20, image: AssetImage('images/tabbar_friends_hl.png')), title: Text('通讯录') ), BottomNavigationBarItem( icon: Image(height: 20,width: 20, image: AssetImage('images/tabbar_discover.png')), activeIcon: Image(height: 20,width: 20, image: AssetImage('images/tabbar_discover_hl.png')), title: Text('发现') ), BottomNavigationBarItem( icon: Image(height: 20,width: 20, image: AssetImage('images/tabbar_mine.png')), activeIcon: Image(height: 20,width: 20, image: AssetImage('images/tabbar_mine_hl.png')), title: Text('我') ) ] ), body: pages[_currentIndex], ), ); } }这里介绍几个关键的组件 1、Scaffold(脚手架组件)Scaffold实现了基本的Material Design布局。只要是在Material Design中定义过的单个界面显示的布局组件元素，都可以使用Scaffold来绘制。 Scaffold常见的属性如下表： 属性名 类型 说明 APPBar AppBar 显示在界面顶部的一个AppBar body Widget 当前界面所显示的主要内容 floatingActionButton Widget 在Material Design中定义的一个功能按钮 persistentFooterButtons List 固定在下方显示的按钮 drawer Widget 侧边栏组件 bottomNavgationBar Widget 显示在底部的导航栏按钮栏 backgroundColor Color 背景颜色 resizeToAvoidBottomPadding bool 控制界面内容body是否重新布局来避免底部被覆盖，比如键盘显示时 2、BottomNavgationBar（底部导航条组件）BottomNavgationBar是底部导航条，类似于iOS中的TabbarController,可以很容易的再tab之间切换，大部分APP都采用这种布局方式。 BottomNavgationBar的常见属性如下表： 属性名 类型 说明 currentIndex int 当前索引，用来切换按钮控制 fixedColor Color 选中按钮的颜色。如果没有指定值，则用系统主题色 iconSize double 按钮图标大小 items List 底部导航条按钮集，每一项是一个BottomNavgationBarItem，有icon图标及title文本属性 onTap ValueChanged 按下其中某个按钮的回调事件。需要根据返回的索引设置当前的索引个人博客 |
【本文地址】
今日新闻 |
推荐新闻 |